<template>
<div class="mer-search-wrapper">
  <el-form size="mini" :inline="true" :model="searchBar" ref="searchBar" label-width="90px">
    <div :class="[isLayout?'g-flex-column':'g-flex-start']">
      <!-- 查询项 -->
      <div class="search-form">
        <el-form-item v-for="(item,index) in searchConfig" :key="index" :label="item.label" :label-width="item.labelWidth">
          <el-input v-if="item.type === 'input'" v-model="searchBar[item.modelName]" :placeholder="item.placeholder" :maxlength="item.maxlength" clearable></el-input>
          <el-select v-if="item.type === 'select'" v-model="searchBar[item.modelName]" :placeholder="item.placeholder" :clearable="item.clearable === undefined ? true : item.clearable" :filterable="item.filterable">
            <template v-if="item.define">
              <el-option v-for="(value,key) in item.selectOptions" :key="key" :label="defineSelectLabel(value,item.selectLabel,item.selectLabelRule)" :value="value[item.selectValue]"></el-option>
            </template>
            <template v-else>
              <el-option v-for="(value,key) in item.selectOptions" :key="key" :label="value" :value="value"></el-option>
            </template>
          </el-select>
          <el-date-picker v-if="item.type === 'date'" v-model="item.model" 
            :type="item.dateType"
            :value-format="item.format" 
            :default-time="['00:00:00', '23:59:59']"
            range-separator="-"   
            :start-placeholder="item.startPlaceholder || '开始时间'" 
            :end-placeholder="item.endPlaceholder || '结束时间'" 
            :picker-options="item.pickerOptions" 
            @change="(value) => changeTime(value,item.modelName)" 
            :clearable="item.clearable"
            :editable="false">
          </el-date-picker>
          <slot v-if="item.type === 'slot'" :name="item.slotName"></slot>
        </el-form-item>
        <slot name="other-search-item"></slot>
      </div>
      <!-- 按钮组 -->
      <div class="search-btn-group">
        <el-form-item style="margin-bottom: 0px">
          <slot name="handlerBefore"></slot>
          <el-button size="mini" type="primary" :loading="loading" @click="searchForm" icon="el-icon-search" class="search-btn">查询</el-button>
          <el-button size="mini" @click="resetForm" icon="el-icon-delete">重置</el-button>
          <el-button size="mini" v-if="download" @click="downloadFile" icon="el-icon-download">导出</el-button>
          <slot name="handler"></slot>
        </el-form-item>
      </div>
    </div>
  </el-form>
</div>
</template>

<script>

export default {
  props: {
    /**
     * label | type | modelName(String) | placeholder | clearable(默认都清，除了个别日期选择)
     * input：maxlength
     * select： selectOptions ｜ filterable ｜ define(Boolean) | selectLabel | selectLabelRule(String|,分割) | selectValue
     * date：model(与searchBar脱离) | modelName( model的字符串，用来赋值model和区分多个date) |  dateType | format | default | startPlaceholder | endPlaceholder | pickerOptions ｜ clearable
     */
    // 注意以下两处为浅拷贝
    // 表单配置数组
    searchConfig: {
      type: Array,
      default: () => []
    },
    searchBar: {
      type: Object,
      default: () => ({})    //()会被解释为代码块
    },
    loading: {
      type: Boolean,
      default: false
    },
    //是否需要查询项与按钮组分行，默认true，标准模式
    isLayout:{
      type: Boolean,
      default: true
    },
    // 是否需要下载按钮，默认为false，为true时，父组件需要监听download事件
    download: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectDate: ''
    }
  },
  methods: {
    // 自定义下拉选择的标签名称
    defineSelectLabel(value, label, labelRule) {
      if (label) {
        return value[label] || value
      }
      // 一般来说是只有三个，startLabel separator endLabel fe: 油站名称 - id
      // 若有其他，再拓展,关注字符串过长的问题
      if (labelRule) {
        const propsArr = labelRule.split(',')
        if (propsArr.length === 3) {
          // trim 消除头尾字符串空格，增强健壮性
          return `${value[propsArr[0].trim()]} ${propsArr[1]} ${value[propsArr[2].trim()]}`
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    changeTime(value, model) {
      this.$emit('changeTime', value, model)
    },
    searchForm(val) {
      this.$emit('search', val)
    },
    resetForm(val) {
      this.$emit('reset', val)
    },
    downloadFile () {
      this.$emit('download')
    }
  }
}
</script>

<style lang="less" scoped>
.mer-search-wrapper {
  .search-btn-group{
    // text-align: right;
    text-align: center;
    .search-btn{
      background: #4B7EFE;
      color: #FFFFFF;
    }
  }
}
/deep/ .el-form.el-form--inline {
    .el-form-item {
      margin-bottom: 20px;
      margin-right: 20px;
    }
    .el-form-item__label::after{
      content: ":";
      position: relative;
      top: -0.5px;
      margin: 0 5px 0 2px;
    }
  }
/deep/ .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 360px;
}
</style>
